<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>添加用户</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>Title</title>
    <script>
        $(function () {
            var search = location.search;
            var empId = search.split("=")[1];
            load(null,empId,null,null);
            $("#searchByDate").click(function () {
                var search = location.search;
                var empId = search.split("=")[1];
                var start = $("#start").val();
                var end = $("#end").val();
                load(null,empId,start,end)
            });
        });

        function load(currentPage,empId,start,end) {
            $.get("PageQuery",{empId:empId,currentPage:currentPage,start:start,end:end},function (data) {
                var timeList = data.list;
                var dates = new Array();
                var starttimes = new Array();
                var endtime = new Array();
                for (var i = 0; i <timeList.length ; i++) {
                    var time = new Date(timeList[i].date);
                    var year = time.getFullYear();
                    var month = time.getMonth()+1;
                    var date = time.getDate();
                    dates[i]=""+year+"年"+month+"月"+date+"号";

                    var hours = new Date(timeList[i].starttime);
                    var hour = hours.getHours();
                    var minutes = hours.getMinutes();

                    var milliseconds = hours.getSeconds();
                    starttimes[i]=""+hour+":"+minutes+":"+milliseconds+"";
                    if(timeList[i].endtime){
                        var hours1 = new Date(timeList[i].endtime);
                        var hour1 = hours1.getHours();
                        var minutes1 = hours1.getMinutes();
                        var milliseconds1 = hours1.getSeconds();
                        endtime[i]=""+hour1+":"+minutes1+":"+milliseconds1+"";
                        /*alert(dates[i]);
                        alert(starttimes[i]);
                        alert(endtime[i]);*/
                    }else{
                        endtime[i]="";
                    }
                }
                var list = '';
                list+='<thead>\n' +
                    '                            <tr>\n' +
                    '                                <th>部门</th>\n' +
                    '                                <th>工号</th>\n' +
                    '                                <th>姓名</th>\n' +
                    '                                <th>日期</th>\n' +
                    '                                <th>上班卡点</th>\n' +
                    '                                <th>下班卡点</th>\n' +
                    '                                <th>迟到</th>\n' +
                    '                                <th>早退</th>\n' +
                    '                                <th>旷工</th>\n' +
                    '                            </tr>\n' +
                    '                            </thead>';
                list+='<tbody>';
                var pblist = data.list;
                for (var  j= 0; j <data.list.length ; j++) {
                    if(pblist[j].latecome==null){
                        pblist[j].latecome="";
                    }
                    if(pblist[j].leave_early==null){
                        pblist[j].leave_early="";
                    }
                    if(pblist[j].absenteeism==null){
                        pblist[j].absenteeism="";
                    }
                    var lis = '<tr>\n' +
                        '                                <td>'+pblist[j].depname+'</td>\n' +
                        '                                <td>'+pblist[j].empId+'</td>\n' +
                        '                                <td>'+pblist[j].name+'</td>\n' +
                        '                                <td>'+dates[j]+'</td>\n' +
                        '                                <td>'+starttimes[j]+'</td>\n' +
                        '                                <td>'+endtime[j]+'</td>\n' +
                        '                                <td>'+pblist[j].latecome+'</td>\n' +
                        '                                <td>'+pblist[j].leave_early+'</td>\n' +
                        '                                <td>'+pblist[j].absenteeism+'</td>\n' +
                        '                            </tr>';
                    list+=lis;
                }
                list+='</tbody>';

                var pageList = '';
                var before = data.currentPage-1;
                if(before <=0 ){
                    before = 1;
                }
                pageList+='<li onclick="javascript:load('+before+','+empId+',\''+start+'\',\''+end+'\')"><a href="javascript:void(0)">上一页</a></li>';
                for (var c = 1; c <= data.totalPage; c++) {
                    var li ='<li onclick="javascript:load('+c+','+empId+',\''+start+'\',\''+end+'\')"><a href="javascript:void(0)">'+c+'</a></li>';
                    pageList+=li;
                }
                var nextNum = data.currentPage+1;
                if(nextNum>data.totalPage){
                    nextNum=data.totalPage;
                }
                pageList+='<li onclick="javascript:load('+nextNum+','+empId+',\''+start+'\',\''+end+'\')"><a href="javascript:void(0)">下一页</a></li>';

                $("#checkinfo").html(list);

                $("#PageNo").html(pageList);

            });
        }


    </script>

</head>
<body>
    <div class="container">
        <div class="container-fluid" id="info">
            <div class="row"><h2 class="sub-header">考勤信息</h2></div>
            <div class="row">
                <ul class="nav nav-pills" >
                    <li role="presentation"><a href="#">本月</a></li>
                    <li role="presentation"><a href="#">本周</a></li>
                    <li role="presentation"><input style="margin-top: 8px" type="date" id="start" name="startDate" placeholder="年/月/日"></li>
                    <li role="presentation"><input style="margin-top: 8px" type="date" id="end" name="endDate" placeholder="年/月/日"></li>
                    <li role="presentation" id="searchByDate"><a href="#">查看</a></li>
                </ul>
                <div class="table-responsive">
                    <table class="table table-striped" id="checkinfo">
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="PageNo">
                </ul>
            </nav>
        </div>

    </div>
</body>
</html>